<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="copyright" content="www.apicloud.com" />
<script src="../script/api.js"></script>
<style>
    html,body,header,section,footer,nav,div,ul,ol,li,img,a,span,em,del,center,strong,var,fieldset,form,label,dt,dd,cite,input,hr,time,mark,code,figcaption,figure,textarea{
        margin:0;
        border:0;
        padding:0;
        font-family: Tahoma, Geneva, sans-serif;
        font-style:normal;
    }
html,body {
    -webkit-touch-callout:none;
    -webkit-text-size-adjust:none;
    -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
    -webkit-user-select:none;
}
header,footer,section,nav,img,a,button,em,del,strong,var,fieldset,label,cite,small,time,mark,code,figcaption,figure,textarea{
    display:block;
}
header,section,footer,nav {
    position:relative;
    overflow:hidden;
}
ol,ul{
    list-style:none;
}
input,button,textarea {
    border:0;
    margin:0;
    padding:0;
    font-size:1em;
    line-height:1em;
    -webkit-appearance:none;
    background-color:rgba(0, 0, 0, 0);
}
span{
    display:inline-block;
}
a,a:visited{
    text-decoration:none;
}
#main {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:-webkit-box;
    -webkit-box-orient: vertical;
}
header {
    position:relative;
    display:-webkit-box;
    -webkit-box-align:center;
    -webkit-box-pack:center;
    height:160px;
}
header>a {
    position:absolute;
    top:10px;
    left:0px;
    width:60px;
    height:60px;
    background:url(../image/side_menu.png) no-repeat center;
    -webkit-background-size: 23px 15px;
}
.header-a-hov {
    background:url(../image/side_menu_hov.png) no-repeat center;
    -webkit-background-size: 23px 15px;
}header>img {
    width:206px;
    height:36;
}
header>em {
    position:absolute;
    bottom:25px;
    left:0px;
    width:100%;
    height:16px;
    line-height:16px;
    text-align:center;
    font-size:16px;
    color:rgba(255,255,255,0.58);
}
section {
    -webkit-box-flex:1;
    display:-webkit-box;
    -webkit-box-orient:vertical;
}
ul {
    display:-webkit-box;
    -webkit-box-flex:1;
    height:100%;
}
ol {
    display:-webkit-box;
    -webkit-box-flex:1;
    height:100%;
}
li {
	display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-box-flex:1;
	-webkit-box-align:center;
    -webkit-box-pack:center;
    width:100%;
    color:#fff;
}
ul li:nth-child(1) {
    background:url(../image/main/ui_sort.png) no-repeat center;
    -webkit-background-size:55px 55px;
}
ul li:nth-child(2) {
    background:url(../image/main/navmenu_sort.png) no-repeat center;
    -webkit-background-size:55px 55px;
}
ul li:nth-child(3) {
    background:url(../image/main/function_sort.png) no-repeat center;
    -webkit-background-size:55px 55px;
}
ol li:nth-child(1) {
    background:url(../image/main/device_sort.png) no-repeat center;
    -webkit-background-size:55px 55px;
}
ol li:nth-child(2) {
    background:url(../image/main/api_sort.png) no-repeat center;
    -webkit-background-size:55px 55px;
}
ol li:nth-child(3) {
    background:url(../image/main/other_sort.png) no-repeat center;
    -webkit-background-size:55px 55px;
}

    .ui_hov {
        background:url(../image/main/ui_sort_hov.png) no-repeat center!important;
        -webkit-background-size:55px 55px!important;
    }
    .navmenu-hov {
        background:url(../image/main/navmenu_sort_hov.png) no-repeat center!important;
        -webkit-background-size:55px 55px!important;
    }
    .function-hov {
        background:url(../image/main/function_sort_hov.png) no-repeat center!important;
        -webkit-background-size:55px 55px!important;
    }
    .device-hov {
        background:url(../image/main/device_sort_hov.png) no-repeat center!important;
        -webkit-background-size:55px 55px!important;
    }
    .api-hov {
        background:url(../image/main/api_sort_hov.png) no-repeat center!important;
        -webkit-background-size:55px 55px!important;
    }
    .other-hov {
        background:url(../image/main/other_sort_hov.png) no-repeat center!important;
        -webkit-background-size:55px 55px!important;
    }

li>span {
    margin-top:105px;
    font-size:14px;
}
footer {
    height:60px;
    text-align:center;
}
footer>span {
    margin-top:30px;
    color:rgba(255,255,255,0.28);
    font-size:9px;
    height:9px;
    line-height:9px;
}
    /*body {*/
        /*background-image: url(../image/common/bg.png);*/
    /*}*/
</style>
</head>
<body>
    <div id="main">
        <header id="header">
            <a tapmode="header-a-hov" onclick="api.openSlidPane({type:'left'});"></a>
            <img src="../image/logo2.png"/>
            <em>模 块 体 验</em>
        </header>
        <section>
            <ul>
                <li tapmode="ui_hov" onclick="openWin(0)"><span>界面</span></li>
                <li tapmode="navmenu-hov" onclick="openWin(1)"><span>导航菜单</span></li>
                <li tapmode="function-hov" onclick="openWin(2)"><span>功能</span></li>
            </ul>
            <ol>
                <li tapmode="device-hov" onclick="openWin(3)"><span>设备</span></li>
                <li tapmode="api-hov" onclick="openWin(4)"><span>API对象</span></li>
                <li tapmode="other-hov" onclick="openWin(5)"><span>开放SDK</span></li>
            </ol>
        </section>
        <footer>
            <span>apicloud.com</span>
        </footer>
    </div>
</body>
<script>
    /* 根据模块类型打开不同的窗口. */
    function openWin(sortId){
        var delay = 0;

        if("ios" != api.systemType){
            delay = 300;
        }

        api.openWin({
                    name: "sort",
                    url: "./sort.html",
                    pageParam: {
                        sortId: sortId
                    },
                    bounces: false,
                    vScrollBarEnabled:false,
                    hScrollBarEnabled:false,
                    reload: true,
                    delay: delay
                }
        );
    }

    // -------------------------------------------------------------------

    window.apiready = function() {
        api.addEventListener({name: 'keyback'}, function(ret, err){
            api.closeWidget();
        });

        var header = $api.byId('header');
        $api.fixIos7Bar(header);
    };
</script>
</html>